<template>
  <div class="container">
    <top-nav :toLastPath="true">返回</top-nav>
    <ul>
      <li>
          <div class="picker">
            <span>联系方式</span>
            <input type="tel" v-model="tel" placeholder="请输入电话号码"/>
          </div>
      </li>
      <li style="margin-top: 10px;">
        <textarea placeholder="请详细描述您遇到的问题,有助于我们快速定位并解决问题." v-model="content"></textarea>
      </li>
      <li style="background-color: #f0f2f5;">
          <div class="picker">
            <div>
              <span class="length">已输入{{font_number}}字</span>
              <span class='mostLength'>最多输入150字</span>
            </div>
            <span @click="clear" class='clear'>清空</span>
          </div>
      </li>
    </ul>
    <div class="commit" @click="commit">
        <div>保存</div>
    </div>
  </div>
</template>

<script>
import topNav from '@/components/topNav'
import {Toast} from 'vant';
export default {
  data () {
    return {
      content:"",
      tel:""
    }
  },
  computed:{
   font_number(){
    return this.content.length
   }
  },
  components: {
    topNav
  },

  methods: {
    clear(){
      this.content=""
    },
    async commit(){
      if(this.tel==''){
        this.$currency.showToast('手机号码不能为空',1500,'fail')
        return
      }
      if(this.content==''){
         this.$currency.showToast('内容不能为空',1500,'fail')
         return
      }
      if(this.content.length>150){
         Toast('字数超出150字')
         return
      }
      var userToken=window.localStorage.getItem('userToken') 
      let res=await this.$axios.post('/project/setFeedBack',{desc:this.content,phone:this.tel,user_token:userToken})
      if(res.data.level=='success'){
        this.$currency.showToast('反馈成功',1500,'success')
        setTimeout(()=>{
          this.$router.push('/me')
        },2000)
      }
    }
  }
}
</script>

<style scoped>
.container{background-color: #F8F8FB;max-height: 100%;padding-top: 10px;min-height: 100%;}
.container ul{width: 100%;margin-top:45px;}
.container ul li{width: 100%;padding: 20px 0px;background-color: #fff;}
.container ul li span:nth-of-type(1){font-size: 16px;color: #000000;padding-left: 25px;}
.container ul li input{font-size: 15px;color: #B2B2B9;margin-right: 20px;width: 200px;}
.container ul li span:nth-of-type(2){font-size: 15px;color: #B2B2B9;margin-right: 20px;}
.container ul li textarea{width: 335px;height: 175px;color: #666666;font-size: 14px;padding: 20px 20px;}
.picker{width: 100%;height: 100%;display: flex;justify-content: space-between;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 99}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}
input,textarea{border:none;}

.mostLength{
  margin-left:20px;
}
/* .length{width:auto!important;} */
.clear{text-align: right;margin-right:20px;}
</style>
